<template>
  <div class="block">
    <span class="demonstration">多级列表菜单</span>
    <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" clearable></el-cascader>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      props: { expandTrigger: 'hover' },
      options: [
        {
          value: 'shuiguo',
          label: '水果',
          children: [
            {
              value: 'pingguo',
              label: '苹果'
            },
            {
              value: 'xiangjiao',
              label: '香蕉'
            }
          ]
        },
        {
          value: 'shucai',
          label: '蔬菜',
          children: [
            {
              value: 'bocai',
              label: '菠菜',
            },
            {
              value: 'xihongshi',
              label: '西红柿'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>